<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="btn">点击</button>
    <script>
        // 模板字符串 

        // var myname = prompt("请输入姓名");
        // var str = "我的名字是"+myname+"我的年龄是23";
        // console.log(str);

        // var mycontent = "我是内容";
        // var str = "<div>"+
        //             "<p>"+mycontent+"</p>"+
        //           "</div>";
        // console.log(str);

        // 模板字符串  定义通过 反引号定义字符串
        // 反引号 是1左边的键
        // var myname = prompt("请输入姓名");
        // var str = `我的名字是${myname}我的年龄是23`;
        // console.log(str);

        // var mycontent = "我是内容";
        // var str = `<div>
        //             <p>${mycontent}</p>
        //           </div>`;
        // console.log(str);

        // ${} ---->插值表达式
        // var myname = "张安";
        // var age = 23;
        // var str = `我的名字是'${myname}'我的年龄是"${age}"`;
        // console.log(str);

        // ${}--->插值表达式里可以接受简单的逻辑 （数学运算符 和 三目运算符）;
        var flag = true;
        var age = 20;
        document.getElementsByClassName("btn")[0].onclick = function(){
            flag = !flag;
            var str = `我的名字是${flag?'张三':'李四'};我的年龄是${age+1}`;
            console.log(str);
        }
        
        

    </script>
</body>
</html>